<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <div>
          <FlightsFilters
            v-if="flightsdata.options&&flightsdata.info"
            :headData="cacheFlightsdata"
            @setDataList="setDataList"
          ></FlightsFilters>
        </div>

        <!-- 航班头部布局 -->
        <div>
          <FlightHeader></FlightHeader>
        </div>
        <!-- 航班信息 -->
        <div>
          <!-- 航班列表 -->
          <FlightItem :flights="item" v-for="(item,index) in dataList" :key="index"></FlightItem>
          <!-- 如果没有数据的提示框 -->
          <div class="tips" v-if="flightsdata.flights&&flightsdata.flights.length==0">暂无数据</div>
          <!-- 分页 -->
          <el-pagination
            v-if="flightsdata.flights&&flightsdata.flights.length>0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="flightsdata.total"
          ></el-pagination>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <FlightsAside></FlightsAside>
      </div>
    </el-row>
  </section>
</template>
<script>
import FlightHeader from "@/components/air/FlightsHeader.vue";
import FlightItem from "@/components/air/FlightsItem.vue";
import FlightsFilters from "@/components/air/FlightsFilters.vue";
import FlightsAside from "@/components/air/FlightsAside.vue";
export default {
  components: {
    FlightHeader,
    FlightItem,
    FlightsFilters,
    FlightsAside
  },
  data() {
    return {
      flightsdata: {},
      cacheFlightsdata: {
        flights: [],
        info: {},
        options: {}
      }, //航班总数据
      // dataList: [], //航班列表数据用于循环遍历
      pageIndex: 1, // 当前页数
      pageSize: 5, // 显示条数
      testvalue: 456
    };
  },
  computed: {
    dataList() {
      const start = (this.pageIndex - 1) * this.pageSize;
      const end = start + this.pageSize;
      if (this.flightsdata.flights) {
        return this.flightsdata.flights.slice(start, end);
      } else {
        // 预防异步数据没有获取完毕，返回一个空数组
        return [];
      }
    }
    // datalist: {
    //   getter: () => {
    //     return this.testvalue;
    //   },
    //   setter: newvalue => {
    //     newvalue = 123;
    //   }
    // }
  },
  watch: {
    $route() {
      //  一旦路由发生变化，就重新获取一下数据
      this.getFlightTicket();
    }
  },
  mounted() {
    this.getFlightTicket();
  },
  methods: {
    getFlightTicket() {
      this.$axios({
        url: "/airs",
        method: "get",
        params: this.$route.query
      }).then(res => {
        console.log("res", res);
        this.flightsdata = res.data;
        // 缓存一份新的列表数据，这个列表不会被修改
        this.cacheFlightsdata = { ...res.data };
        this.dataList = this.flightsdata.flights;
      });
    },
    setDataList(newArr) {
      if (newArr) {
        //将pageIndex置为1
        this.pageIndex = 1;
        // 修改机票列表数据
        this.flightsdata.flights = newArr;
        // 修改总的列表数据
        this.flightsdata.total = newArr.length;
      }
    },
    handleSizeChange(size) {
      this.pageSize = size;
      // 每次切换pageSize(每页数据长度)时，将当前页置为第一页
      this.pageIndex = 1;
    },
    handleCurrentChange(pageIdx) {
      console.log("当前页面", pageIdx);
      this.pageIndex = pageIdx;
    }
  }
};
</script>
<style scoped lang="less" scoped>
.contianer {
  width: 1000px;
  margin: 80px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
.tips {
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
</style>